<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="page_top">
      <div class="left_btn" @click="back">
        <img src="../../assets/image/back.png" alt="" />
      </div>
      <crumbs basetitle="保险" title="日日保客户列表"></crumbs>
    </div>
    <div class="content">
      <el-card>
        <div class="screen">
          <span class="bord">筛选</span>
          <div class="utilsbox">
            <div class="deleate" @click="clear">
              <img style="margin-top: -1px" src="../../assets/image/容器.png" alt="" />
              <span class="clear">清除</span>
            </div>
            <div class="deleate" @click="exportcompanylist">
              <img style="margin-top: -1px" src="../../assets/image/Share.png" alt="" />
              <span class="clear">投保客户信息</span>
            </div>
            <div class="deleate" @click="exportcompanylist">
              <img style="margin-top: -1px" src="../../assets/image/Share.png" alt="" />
              <span class="clear">保险详单</span>
            </div>
          </div>
        </div>
        <div class="screen_condition">
          <div class="formbox">
            <div class="flex items-center">
              <span class="flex-no-shrink">产品类型：</span>
              <el-select
                clearable
                v-model="producttype"
                class="m-2 w-full flex-1"
                placeholder="请选择产品类型"
                @change="changeproducttype"
              >
                <el-option key="1" label="日日保" value="1" />
                <el-option key="3" label="团意日保" value="3" />
              </el-select>
            </div>
            <div class="flex items-center">
              <span class="flex-no-shrink w-100">选择月份：</span>
              <el-date-picker
                clearable
                v-model="datem"
                value-format="YYYY-MM"
                type="month"
                class="w-full reset-flex flex-1"
                placeholder="请选择月份"
              />
            </div>
            <div class="flex items-center">
              <span class="flex-no-shrink">保司：</span>
              <el-select
                clearable
                v-model="baosi"
                class="m-2 w-full flex-1"
                placeholder="请选择保司"
                @focus="handleBSFocus"
              >
                <el-option
                  v-for="(ele, index) in baosilist"
                  :key="ele.dictValue"
                  :label="ele.dictLabel"
                  :value="ele.dictValue"
                />
              </el-select>
            </div>
            <div class="flex items-center">
              <span class="flex-no-shrink">余额状态：</span>
              <el-select
                clearable
                v-model="yestatus"
                class="m-2 w-full flex-1"
                placeholder="请选择余额状态"
                @change="getclientslist"
              >
                <el-option key="0" label="全部" value="0" />
                <el-option key="1" label="有余额" value="1" />
                <el-option key="2" label="余额为零" value="2" />
              </el-select>
            </div>
          </div>
          <div class="formbox" v-show="!openorcloseflag">
            <div class="flex items-center">
              <span class="flex-no-shrink">所属销售：</span>
              <el-input
                class="w-full flex-1"
                clearable
                v-model="salename"
                placeholder="请输入销售名"
                @input="getclientslist"
              ></el-input>
            </div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 16px">
        <div class="table-list">
          <el-table
            height="520"
            :data="tableData"
            ref="multipleTableRef"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#FAFAFC',
              color: '#202536',
            }"
          >
            <!-- <el-table-column type="selection" width="40" /> -->
            <el-table-column prop="date" label="客户名" align="center" min-width="300">
              <template #default="scope">
                <div>
                  <el-tag v-show="scope.row.auditStatus === 1">通过</el-tag>
                  <el-tag v-show="scope.row.auditStatus === 2" class="ml-2" type="danger"
                    >驳回</el-tag
                  >
                  <el-tag v-show="scope.row.auditStatus === 0" class="ml-2" type="info"
                    >待审核</el-tag
                  >
                  {{ scope.row.companyName }}
                </div>
                <div class="b_d" v-show="scope.row.companyAbbreviation">
                  {{ scope.row.companyAbbreviation }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="产品类型"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="所属业务员"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="保司"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="账户余额"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="在保人数"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="保单数量"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="账户状态"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="费率"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="理赔率"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="230" align="center">
              <template #default="scope">
                <el-button
                  link
                  style="color: #0256ff"
                  size="small"
                  @click.prevent="detail(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :currentPage="currentPage"
            :pageSize="pageSize"
            @SizeChange="handleSizeChange"
            @CurrentChange="handleCurrentChange"
          ></pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.content {
  max-height: 800px;
  overflow: auto;
  box-sizing: border-box;
  margin: 16px;
}

.screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: 2px solid #f4f4f7;

  .deleate {
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .bord {
    font-weight: 700;
  }

  img {
    margin-right: 10px;
    margin-top: 5px;
  }

  .clear {
    color: rgba(148, 151, 177, 1);
    font-size: 14px;
  }
}

.screen_condition {
  box-sizing: border-box;
  padding: 0 20px;
  margin-top: 16px;

  .formbox {
    margin-top: 16px;
    width: 100%;
    // box-sizing: border-box;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    // gap: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

    div {
      // flex: 1;
      // padding-right: 30px;
      // box-sizing: border-box;
    }
  }
}
.utilsbox {
  display: flex;
  align-items: center;

  .deleate {
    margin-right: 10px;
  }
}
</style>
